<template>
  <div class="search-car-box">
    <div class="search-panel">
      <input type="text" class="search-car-input" :placeholder="placeholder"><i
      class="search-car-btn iconfont icon-sousuo"></i>
    </div>
    <div class="search-result">
    </div>
  </div>
</template>

<script>
  import MYCONFIG from '../../myConf'
  export default {
    name: "search-car",
    data() {
      return {
        placeholder: '搜索车辆，可输入车组名，ID，POI等'
      }
    },
    created(){
      Promise.all([this.getPOI("四维图新"),this.getPOI("北清路")]).then((pois)=>{
        console.log(pois);
      })
    },
    methods:{
      getPOI(val){
        let url = 'http://minedata.cn/service/search/keyword';
        let data = {
          token:MYCONFIG.map.token,
          adcode:"110000",
          source:"3",
          searchType:"all",
          pageNumber:"2",
          key:val
        };
        console.log(data)
        let options = {
          params:data,
          headers:{
            "Content-Type":"application/x-www-form-urlencoded;charset=utf-8"
          }
        };
        return this.$http.get(url,options)
      }
    }

  }
</script>

<style scoped lang="scss">
  @import "../../common/scss/const";
  @import "../../common/scss/func";

  .search-car-box {
    display: inline-block;
    position: relative;
    margin-left: 20px;
    vertical-align: middle;
    .search-panel {
      .search-car-input {
        font-size: $ft-middle;
        width: 250px;
        height: 30px;
        line-height: 30px;
        color: $color-comm;
        outline: none;
        border: 1px solid $color-border;
        border-right: none;
        border-radius: 4px 0 0 4px;
        background: $color-bg-component;
        vertical-align: middle;
        &::-moz-placeholder {
          color: $color-placeholder;
          text-indent: 5px;
        }
        &:-ms-input-placeholder {
          color: $color-placeholder;
          text-indent: 5px;
        }
        &::-webkit-input-placeholder {
          color: $color-placeholder;
          text-indent: 5px;
        }
      }
      .search-car-btn {
        width: 50px;
        text-align: center;
        display: inline-block;
        font-size: $ft-middle+10px;
        height: 30px;
        line-height: 30px;
        vertical-align: middle;
        border: 1px solid $color-border;
        color: #7AE9E5;
        background: $color-bg-inactive;
        border-radius: 0 4px 4px 0;
        cursor:pointer;
        &:hover{
          color: #A7FFFC;
          background: $color-bg-active;
        }
      }
    }
  }
  @media (min-width:1900px) {
    .search-car-box {
      margin-left: 20px;
      vertical-align: middle;
      .search-panel {
        .search-car-input {
          font-size: $ft-big;
          width: 380px;
          height: 40px;
          line-height: 40px;
          color: $color-comm;
          outline: none;
          border: 1px solid $color-border;
          border-right: none;
          border-radius: 4px 0 0 4px;
          background: $color-bg-component;
          vertical-align: middle;
          &::-moz-placeholder {
            color: $color-placeholder;
            text-indent: 5px;
          }
          &:-ms-input-placeholder {
            color: $color-placeholder;
            text-indent: 5px;
          }
          &::-webkit-input-placeholder {
            color: $color-placeholder;
            text-indent: 5px;
          }
        }
        .search-car-btn {
          width: 60px;
          text-align: center;
          display: inline-block;
          font-size: $ft-big+15px;
          height: 40px;
          line-height: 40px;
          vertical-align: middle;
          border: 1px solid $color-border;
          color: #7AE9E5;
          background: $color-bg-inactive;
          border-radius: 0 4px 4px 0;
          cursor:pointer;
          &:hover{
            color: #A7FFFC;
            background: $color-bg-active;
          }
        }
      }
    }
  }

</style>
